//库存管理
<template>
  <div>
    <kinds_drawer ref="drawer" :type="'INVENTORY'"></kinds_drawer>
    <div class="search">
      <el-input
        placeholder="请输入商品名/条码"
        prefix-icon="el-icon-search"
        @input="handleQuery"
        @change="$handleQuery"
        v-model="query"/>
      <el-button
        @click="showDrawer"
        type="primary"
        class="btn">
        分类选择
      </el-button>
      </div>
    <el-table
    :data="goodList.slice((currentPage-1)*pagesize,currentPage*pagesize)"
    highlight-current-row
    max-height="55vh"
    height="55vh"
    v-loading="loading"
    border>
      <el-table-column
        label="序号"
        width="50">
        <template slot-scope="scope">
          <span>
            {{scope.$index+1+(currentPage-1)*5}}
          </span>
        </template>
      </el-table-column>
      <el-table-column
      prop="good.good.name"
      align="center"
      label="商品名">
      </el-table-column>
      <el-table-column
        prop="good.good.barcode"
        align="center"
        label="条码">
      </el-table-column>
      <el-table-column
        prop="inventoryGoods.num"
        align="center"
        sortable
        label="库存">
      </el-table-column>
      <el-table-column
        prop="inventoryGoods.cost"
        label="进价"
        sortable
        align="center">
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 20, 40]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="goodList.length">
    </el-pagination>
  </div>
</template>

<script>
import {queryInventory,loadInventory} from "../../services/inventoryService";
import kinds_drawer from "./goods_manager/kinds_drawer";
export default {
      name: "Inventory",
      components:{kinds_drawer},
      data(){
          return{
            that:this,
            query:'',
            kind:["default"],
            currentPage:1, //初始页
            pagesize:5,    //    每页的数据
            goodList:[],
            loading:false,
            handleQuery:this._func.debounce(this.$handleQuery,2000,false)
          }
      },
      mounted() {
        this.loadGoods();
      },
      watch:{
        //监听分类筛选条件
        "$store.state.inventory.kind":function () {
          this.kind=this.$store.state.inventory.kind;
          this.loadGoods();
        }
      },
      methods:{
        showDrawer(){
          this.$refs.drawer.drawer=true
        },
          //模糊查询
        $handleQuery(){
          queryInventory(this.query).then(success=>{
            this.goodList=success.data;
          },failed=>{
            this.$message({
              type:'error',
              message:'查询失败',
            })
          })
        },
        // 初始页currentPage、初始每页数据数pagesize和数据data
        handleSizeChange: function (size) {
          this.pagesize = size;
        },
        handleCurrentChange: function(currentPage){
          this.currentPage = currentPage;
        },
        loadGoods(){
          this.loading=true;
          if(this.kind.length==0){
            this.goodList=[];
            this.loading=false;
            return;
          }
          loadInventory(this.kind).then(success=>{
            this.goodList=success.data;
            this.loading=false;
          },failed=>{
            this.$message({
              type:'error',
              message:'库存加载失败',
            })
          })
        }
      }
    }
</script>

<style scoped>
.search{
  width: 30%;
}
.search .btn{
  width: 10vw;
  height: auto;
  position: absolute;
  right: 0;
  font-size: 2vh
}
</style>
